<template>
<div class="line"></div>  
<div class="line1"></div>  
<div class="line"></div>

<hr style="border: none; height: 4px; color: #333; background-color: bule; width:50%;margin: 20px auto; " />
<div class="inspirational-notice1"># 球桌展示</div>
<br>

  <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1000">
<img src="../../assets/60.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="1000">
<img src="../../assets/61.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../assets/62.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../assets/63.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../assets/64.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../assets/65.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

<div class="center-button-container">  
    <button class="inspirational-notice2"  @click="goToPool">查看更多</button>  
</div>








</template>

<script scoped>
export default {
  methods: {  
    goToPool() {  
      this.$router.push('/pool');  
    }  
  }  
};
</script>

<style>
/* 三条线 */
.line {
  height: 5px; /* 线的高度（等同于宽度） */
  background-color: lightblue; /* 线的颜色 */
  margin-bottom: 2px; /* 底部外边距，模拟线之间的间距 */
}
.line1 {
  height: 5px; /* 线的高度（等同于宽度） */
  background-color: rgb(131, 211, 241); /* 线的颜色 */
  margin-bottom: 2px; /* 底部外边距，模拟线之间的间距 */
}

/* 球桌信息 */
.inspirational-notice1 {
  /* 设置字体大小 */
  font-size: 20px;

  /* 设置字间距 */
  letter-spacing: 2px;

  /* 设置字体背景 */
  background-color: #719edc; /* 背景颜色为浅灰色 */
  padding: 10px; /* 内边距，使文本不会紧贴在边框上 */

  /* 居中显示 */
  text-align: center; /* 文本水平居中 */
  margin: 0 auto; /* 如果div有固定宽度，这将使其水平居中 */

  /* 设置颜色 */
  color: #0f0d0d; /* 文字颜色为深灰色 */

  /* （可选）设置div宽度（如果需要） */
  width: 20%; /* 宽度为父元素宽度的50% */
  border-radius: 20%; /* 其他可能的样式，如 border-radius 圆角等 */
}

/* 
轮播图 */
/* 设置轮播图容器的大小 */
#carouselExampleInterval {
  width: 800px; /* 或者你想要的固定宽度，比如600px */
  height: 350px;
  max-width: 800px; /* 防止过宽 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  margin: 0 auto; /* 居中显示，如果设置了固定宽度的话 */
  border-radius: 50%;
}

/* 设置轮播图图片的大小 */
#carouselExampleInterval .carousel-item img {
  width: 100%; /* 图片宽度设置为容器宽度的100% */
  height: auto; /* 图片高度自动以保持比例 */
  object-fit: cover; /* 如果需要，可以使用object-fit来确保图片覆盖整个容器，同时保持比例 */
}

/* 查看更多按钮 */

.center-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 根据需要设置父元素的高度 */
}

.inspirational-notice2 {
  /* 设置字体大小 */
  font-size: 12px;

  /* 设置字间距 */
  letter-spacing: 2px;

  /* 设置字体背景 */
  background-color: #0ab5bb; /* 背景颜色为浅灰色 */
  padding: 10px; /* 内边距，使文本不会紧贴在边框上 */

  /* 居中显示 */
  text-align: center; /* 文本水平居中 */
  margin: 0 auto; /* 如果div有固定宽度，这将使其水平居中 */

  /* 设置颜色 */
  color: #0f0d0d; /* 文字颜色为深灰色 */

  /* （可选）设置div宽度（如果需要） */
  width: 10%; /* 宽度为父元素宽度的50% */
  border-radius: 100%; /* 其他可能的样式，如 border-radius 圆角等 */
}

.pp1 {
  font-size: 12px;

  /* 设置字间距 */
  letter-spacing: 2px;
  text-align: center; /* 文本水平居中 */
  color: #5c5a5a; /* 文字颜色为深灰色 */
}
</style>